Help
Header Customization
The header can be customized with specific application logo and background image.
The logo accommodates an image with a max width and height of 182px and 45px, respectively. Text can be used instead of an image.
The example below with the logo "Knowledge Exchange" uses text instead of an image. The text "knowledge" uses the "Roboto Light Italic" font at 24px size. The subheading "exchange' is the same font at at 18px.
The example below with the logo "Meetings Registration" uses text instead of an image. The text "Meeting" uses the "Roboto Black" font at 24px size. The subheading "Registration' uses "Roboto Light Italic" font at 18px.
The example below with the logo "Parking Application" uses text instead of an image. The text "Parking" uses the "Roboto Black" font at 24px size. The subheading "Application' uses "Roboto Light Italic" font at 18px.
The example below with the logo "eP" uses text instead of an image. The first letter "e" "Roboto Light Italic" font at 36px. The second letter "P' uses "Roboto Black" font at 36px.
Component Files
This style guide was created using SASS, a commonly-used CSS file generator, and Node EJS templates.
You may find it useful to continue using the SASS files to output the plain CSS that the browser actually uses. Continuing to use the SASS source files gives you the advantage of using variables for things like colors and avoiding code duplication. The SASS (SCSS) files are found in the CSS directory.
All the development dependencies that were used to create this style guide are specified inside the package.json file. You can use Node.js and the Gulpfile.js included in this project to build the CSS files from the SASS source files. Assuming you already have Node installed, simply run "npm install" from this project's root directory from the command line. This will install all the dependencies listed in package.json. Then run "gulp watch" to build the CSS from the SCSS files.